<template>
    <div class="my-tag">
      <input 
        v-if="isShow"
        v-focus
        :value="value"
        class="input"
        type="text"
        placeholder="输入标签"
        @blur="isShow=false"
        @keyup.enter="changeTag"
      />
      <div class="text" v-else @dblclick="isShow=true">
        {{ value }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      value: String
    },
    data() {
      return {
        isShow: false
      }
    },
    methods:{
        changeTag(e){
            if(e.target.value.trim()==''){
                alert('请输入内容')
                return
            }
            //让输入框隐藏
            this.isShow=false
            //修改父组件数据
            this.$emit('input',e.target.value)
        }
    }
  }
  </script>
  
  <style scoped></style>
  